<template>
  <el-dialog
    top="30px"
    width="900px"
    class="dialog-sm"
    append-to-body
    title="项目详情"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="mb-3" v-loading="loading">
      <table class="table table-bordered text-center vertical-align-middle">
        <tr>
          <td colspan="2" class="font-weight-bold">贷款年限(月)</td>
          <td colspan="2">{{ projectData.months }}</td>
          <td class="font-weight-bold">核算保费（万元）</td>
          <td colspan="2">{{ projectData.check_warranty_fee }}</td>
        </tr>

        <tr class="text-center">
          <th width="10%">期数</th>
          <th width="15%">
            本期累计实缴
            <div>（万元）</div>
          </th>
          <th width="15%">
            本期应收
            <div>（万元）</div>
          </th>
          <th width="15%">
            本期实收
            <div>（万元）</div>
          </th>
          <th width="15%">
            收到上期欠款
            <div>（万元）</div>
          </th>
          <th width="15%">
            本期预收
            <div>（万元）</div>
          </th>
          <th width="15%">
            本期欠收
            <div>（万元）</div>
          </th>
        </tr>
        <tr v-for="(p, index) of tableData" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ p.payed_warranty_fee }}</td>
          <td>{{ p.due_warrant_fee }}</td>
          <td>{{ p.actual_warrant_fee }}</td>
          <td>{{ p.owe_warrant_fee_coll }}</td>
          <td>{{ p.pre_warrant_fee }}</td>
          <td>{{ p.owe_warrant_fee }}</td>
        </tr>
        <tr>
          <td rowspan="2">合计</td>
          <td rowspan="2">{{ countData.payed_warranty_fee }}</td>
          <td rowspan="2">{{ countData.due_warrant_fee }}</td>
          <td>{{ countData.actual_warrant_fee }}</td>
          <td>{{ countData.owe_warrant_fee_coll }}</td>
          <td rowspan="2">-</td>
          <td rowspan="2">-</td>
        </tr>
        <tr>
          <td colspan="2">{{ countFunds }}</td>
        </tr>
      </table>
    </div>
  </el-dialog>
</template>

<script>
import { add } from '@vimi/utils-tool'
export default {
  components: {},
  props: {
    visible: Boolean,
    relatedId: String,
    projectData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
    }
  },
  computed: {
    countData() {
      return this.tableData.reduce(
        (a, item) => {
          a.payed_warranty_fee = add(a.payed_warranty_fee, item.payed_warranty_fee)
          a.due_warrant_fee = add(a.due_warrant_fee, item.due_warrant_fee)
          a.actual_warrant_fee = add(a.actual_warrant_fee, item.actual_warrant_fee)
          a.owe_warrant_fee_coll = add(a.owe_warrant_fee_coll, item.owe_warrant_fee_coll)

          return a
        },
        {
          payed_warranty_fee: 0,
          due_warrant_fee: 0,
          actual_warrant_fee: 0,
          owe_warrant_fee_coll: 0,
        }
      )
    },
    countFunds() {
      return add(this.countData.actual_warrant_fee, this.countData.owe_warrant_fee_coll)
    },
  },
  watch: {
    visible: {
      handler: function (val) {
        val && this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      if (!this.relatedId) return

      this.loading = true
      this.$api
        .getData({
          table: 'credit_warrant_fee_statistics_list_detail',
          params: {
            'customer_related_id.eq': this.relatedId,
          },
          order: {
            due_warrant_date: 'asc',
          },
        })
        .then(res => {
          this.tableData = res?.data ?? []
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.vertical-align-middle th {
  vertical-align: middle;
}
.table-dl {
  td:nth-child(2n + 1) {
    text-align: right;
  }
}
</style>
